#{extends 'logged_user.html' /}
#{set title:'Handshake Feedback' /}
#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery.rating.css'}">
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/javascripts/jquery.rating.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{/set}
  <form action="@{Handshakes.submitFeedback(serviceItem.id)}" method="POST" class="utility_form taggable">
<div class="restrictions">
<h3>${serviceItem.title}</h3>
<ul>    
    <li>
        <label style="padding-top:7px">Handshake has occured, hasn't it?</label>  &nbsp;&nbsp;&nbsp;
        <select id="ddlHasOccured" tabindex="30" >
            <option value="0">No</option>
            <option value="1" selected="selected">Yes</option>              
        </select>
        <input id="chkHasOccured" style="visibility: hidden; display: none" type="checkbox" name="hasOccured" ${hasOccured ? 'checked': ''}  />  
    </li>
</ul>
<div class="userFeedback">	
#{if isOwner}
	#{if userApplications}
		<table>
			#{list items: userApplications, as:'userApplication'}
			<tr>
				<td>
					<strong>${userApplication.getKey().fullname}</strong>
				</td>
				<td>
					<a href="@{Users.profile(userApplication.getKey().id)}">
    				#{if userApplication.getKey().photo.exists()}
    					<img alt=" ${userApplication.getKey().fullname}'s avatar" src="@{Application.showUserPhoto(userApplication.getKey().id)}" class="lemiddleavatar"/>
    				#{/if}
    				#{else}
    					<img alt="Default Avatar" src="/public/images/lbi02.png" class="lepetitavatar" />
    				#{/else}
    				</a>
				</td>
				<td>
					<div class="rating">
						<input name="${userApplication.getKey().id}" type="hidden" value="${userApplication.getKey().id}"/>
						<input id="rating_${userApplication.getKey().id}" name="${userApplication.getValue().id}" type="hidden" value="${userApplication.getValue().id}"/>
						<input name="star_${userApplication.getKey().id}" type="radio" class="star" value="1"/>
						<input name="star_${userApplication.getKey().id}" type="radio" class="star" value="2"/>
						<input name="star_${userApplication.getKey().id}" type="radio" class="star" value="3" checked="checked"/>
						<input name="star_${userApplication.getKey().id}" type="radio" class="star" value="4"/>
						<input name="star_${userApplication.getKey().id}" type="radio" class="star" value="5"/>
						<input name="star_${userApplication.getKey().id}" type="hidden" class="rating" value="${userApplication.getValue().rating}"/>
					</div>
				</td>
			</tr>
			#{/list}
		</table>
	#{/if}     
#{/if} 
#{else}
	<table>
		<tr>
			<td>
				<strong>${serviceOwner.fullname}</strong>
			</td>
			<td>
				<a href="@{Users.profile(serviceOwner.id)}">
					#{if serviceOwner.photo.exists()}
    					<img alt=" ${serviceOwner.fullname}'s avatar" src="@{Application.showUserPhoto(serviceOwner.id)}" class="lemiddleavatar"/>
    				#{/if}
    				#{else}
    					<img alt="Default Avatar" src="/public/images/lbi02.png" class="lepetitavatar" />
    				#{/else}
   				</a>
			</td>
			<td>
				<div class="rating">
					<input name="${serviceOwner.id}" type="hidden" value="${serviceItem.id}"/>
					<input id="rating_${serviceOwner.id}" name="${ratingOwner.id}" type="hidden" value="${ratingOwner.id}"/>
					<input name="star_${serviceOwner.id}" type="radio" class="star" value="1"/>
					<input name="star_${serviceOwner.id}" type="radio" class="star" value="2"/>
					<input name="star_${serviceOwner.id}" type="radio" class="star" value="3" checked="checked"/>
					<input name="star_${serviceOwner.id}" type="radio" class="star" value="4" />
					<input name="star_${serviceOwner.id}" type="radio" class="star" value="5"/>
					<input name="star_${serviceOwner.id}" type="hidden" class="rating" value="${ratingOwner.rating}"/>
				</div>
			</td>
		</tr>
	</table>
#{/else}
</div>
<button type="submit" class="btn btn-primary">Submit Feedback</button>
</div>
</form>
<script>

$(document).ready(function() {

$(function(){
	 $('input[type=radio].star').rating({
		 callback: function (value, link) {
			 var nameInput = $(this).attr('name');
			 nameInput = nameInput.replace("star","rating");
			 var ratingInput = $('input[id=' + nameInput + '][type=hidden]');
			 var ratingId = ratingInput.val();
			 //ajax try
			 var rootPath = "@@{Application.index()}";
			 SetRating(rootPath,ratingId,value);
		 }
	 });
	});


var ratingObject = $('input[type=hidden].rating');
$.each(ratingObject, function() { 
	var rate = $(this).val();
	var nameInput = $(this).attr('name');
	var chkbx = $('input[type=radio][name='+nameInput+'][value='+rate+'].star'); 
	chkbx.prop("checked", true);
	});
	

	});	
	

function SetRating(rootPath,ratingId,rating){
	var serviceUrl =rootPath + "handshakes/setRating?ratingId="+ratingId+"&userRating="+rating; 
	$.post(serviceUrl);
}

// virtualization option.
$("#ddlHasOccured").live("change", function() {
	var value = $(this).val();
	
	if (0 == value) {
		$(".userFeedback").addClass("hidden");
		
	} else {
		$(".userFeedback").removeClass("hidden");
		}
});
</script>